<template>
  <div style="margin: 15px">
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="key" placeholder="姓名/手机/身份证"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="borrowers" stripe style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="mobile" label="手机"> </el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="160">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.sex === 1 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="marry" label="是否结婚">
        <template slot-scope="scope">
          <span>{{ scope.row.marry ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.status === 0">未提交</el-tag>
          <el-tag type="info" v-else-if="scope.row.status === 1">认证中</el-tag>
          <el-tag type="success" v-else-if="scope.row.status === 2">
            审批通过
          </el-tag>
          <el-tag type="danger" v-else>审批失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="200" label="申请时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleApprove(scope.$index, scope.row)"
            >审批</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 3, 4, 5, 6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import borrowerApi from "@/api/borrower";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 3,
      key: "",
      total: 0,
      borrowers: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    //审批
    handleApprove(idx, row) {
      this.$router.push(`/borrower/info/${row.id}`);
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.initData();
    },
    handleCurrentChange(num) {
      this.pageNum = num;
      this.initData();
    },
    handleQuery() {
      this.initData();
    },
    handleClear() {
      this.pageNum = 1;
      this.pageSize = 3;
      this.key = "";
      this.initData();
    },
    initData() {
      //r代表响应体json
      borrowerApi.page(this.pageNum, this.pageSize, this.key).then((r) => {
        this.total = Number(r.data.page.total);
        this.borrowers = r.data.page.records;
        console.log(r.data);
      });
    },
  },
};
</script>
